<template>
  <div>
    <div id="webgl" style="margin-top: 200px;margin-left: 100px;"></div>
  </div>
</template>

<script>
import * as THREE from "three";
// 引入相机控件 实现旋转缩放预览效果 （改变相机的位置、角度、缩放）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
console.log("three", THREE);

export default {
  mounted() {
    console.log("mounted");
    // 创建3D场景对象Scene
    const scene = new THREE.Scene();
    // scene.background = new THREE.Color(0xFF0000);
    console.log("scene", scene);
    // 给场景加物体
    // 定制形状：长方体 width height depth【深度】 物体在 3D 空间中的结构（比如有多少个面、多少个顶点）
    const geometry = new THREE.BoxGeometry(150, 150, 150);
    // 材质：颜色 （ 物体的"皮肤"或"外表")
    const material = new THREE.MeshBasicMaterial({
      color: 0xffa500, //设置材质颜色
      transparent: true, //开启透明
      opacity: 0.5 //设置透明度
    });
    // 创建一个网格模型，用于表示生活中的物体
    const mesh = new THREE.Mesh(geometry, material);
    console.log("mesh", mesh);
    // 定义物体（即网格模型）在场景中的位置
    mesh.position.set(0,0,0);
    // 将物体放到场景中
    scene.add(mesh);
    //  总：以上是一个完整的三维场景
    // PerspectiveCamera 本质是在模拟人眼观察这个世界的规律
    // 实例化一个透视投影相机对象 视野角度300，宽高比600/600，近裁面1，远裁面1000
    const camera = new THREE.PerspectiveCamera(45, 800 / 500, 0.1, 1000);
    console.log('camera',camera);

    // 设置相机的位置
    camera.position.set(150, 150, 150);
    // 相机的视线，观察目标点的位置 指向网格模型
    camera.lookAt(mesh.position); // 默认是(0,0,0)原点
    // 添加三维坐标轴
    const axis = new THREE.AxesHelper(500);// 注意设置的时候一定要大于geometry中的值否则不显示。
    axis.setColors(0xff0000, 0x00ff00, 0x0000ff);
    // 将坐标轴添加到场景中，方便观察方向
    scene.add(axis);
    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(800, 500); //设置three.js渲染区域的尺寸(像素px)
    renderer.render(scene, camera); //执行渲染操作
    document.getElementById("webgl").appendChild(renderer.domElement);
    console.log("renderer", renderer);

    // 2.
    // 设置相机控件轨道控制器OrbitControls camera 改变相机的参数 变化了需要重新渲染画布
    const controls = new OrbitControls(camera, renderer.domElement);
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    controls.addEventListener("change", function(e) {
      console.log("e", e);
      renderer.render(scene, camera); //执行渲染操作
    }); //监听鼠标、键盘事件
     // 渲染循环
    function render() {
      mesh.rotateY(0.1);
      renderer.render(scene, camera); //执行渲染操作
      requestAnimationFrame(render);
    }
    // render()
  },
  methods: {
  
  }
};
</script>

<style scoped>
</style>